<template>
    <div class="right-menu-item hover-effect" @click="click">
        <img :src="isFullscreen?narr:enla" alt="" class="screenfull">
    </div>
</template>

<script>
import screenfull from 'screenfull'

export default {
    name: 'Screenfull',
    data() {
        return {
            isFullscreen: false,
            enla: require('@/assets/images/enla.png'), //放大
            narr: require('@/assets/images/narr.png'), //缩小
        }
    },
    mounted() {
        this.init()
    },
    beforeDestroy() {
        this.destroy()
    },
    methods: {
        click() {
            if (!screenfull.isEnabled) {
                this.$message({
                    message: '你的浏览器不支持全屏',
                    type: 'warning',
                })
                return false
            }
            screenfull.toggle()
        },
        change() {
            this.isFullscreen = screenfull.isFullscreen
        },
        init() {
            if (screenfull.isEnabled) {
                screenfull.on('change', this.change)
            }
        },
        destroy() {
            if (screenfull.isEnabled) {
                screenfull.off('change', this.change)
            }
        },
    },
}
</script>

<style lang="scss" scoped>
.screenfull {
    display: inline-block;
    cursor: pointer;
    fill: #5a5e66;
    width: 15px;
    height: 15px;
    vertical-align: -1px;
}
.hover-effect:hover {
    background-color: #{'var(--current-dark)'} !important;
}
</style>
